@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-calendar {
  overflow: hidden;

  /* elements */
  &__header {
    .header__flex {
      @include display-flex;
      @include align-items(center);

      height: 72px;
      color: $at-calendar-header-color;
      text-align: center;

      &-item {
        @include flex(0 0 calc(100% / 7));

        font-size: 30px;
      }
    }
  }

  &__list {
    &.flex {
      @include display-flex;
      @include align-items();
      @include flex-wrap(wrap);

      color: $at-calendar-day-color;

      .flex__item {
        @include flex(0 0 calc(100% / 7));

        font-size: 30px;
        text-align: center;
        position: relative;
        margin: 5px 0;

        &-container {
          @include align-items(center);
          @include display-flex;

          width: $at-calendar-day-size;
          height: $at-calendar-day-size;
          margin-left: auto;
          margin-right: auto;
          border-radius: 50%;

          .container-text {
            @include flex;
          }
        }

        &-extra {
          .extra-marks {
            position: absolute;
            bottom: 5px;
            line-height: 0;
            left: 50%;
            //  transform: translateX(-50%);

            .mark {
              width: $at-calendar-mark-size;
              height: $at-calendar-mark-size;
              margin-right: 4px;
              //  display: inline-block;
              background-color: $at-calendar-main-color;
              border-radius: 50%;
              overflow: hidden;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }

        &--today {
          color: $at-calendar-main-color;
          font-weight: bolder;
        }

        &--blur {
          color: #e1e4e7;
        }

        &--selected {
          color: white;
          background-color: rgba($color: $at-calendar-main-color, $alpha: 0.7);

          &-head {
            border-top-left-radius: 40px;
            border-bottom-left-radius: 40px;
          }

          &-tail {
            border-top-right-radius: 40px;
            border-bottom-right-radius: 40px;
          }

          /* stylelint-disable-next-line */
          .extra-marks .mark {
            background-color: white;
          }

          &-head.flex__item--selected-tail {
            background-color: transparent;

            .flex__item-container {
              background-color: rgba(
                $color: $at-calendar-main-color,
                $alpha: 0.7
              );
            }
          }
        }
      }
    }
  }

  &__controller {
    @include display-flex;
    @include align-items(center);
    @include justify-content(center);

    margin-bottom: 20px;

    .controller__arrow {
      @include flex(0 0 40px);

      height: 40px;
      border-radius: 12px;
      //  display: inline-block;
      background-size: 16px 24px;
      background-position: center;
      background-color: #f7f8fc;
      background-repeat: no-repeat;
      background-image: url("");

      &--right {
        //  transform: rotate(180deg);
      }

      &--disabled {
        opacity: 0.5;
      }
    }

    .controller__info {
      @include flex(0 0 auto);

      font-size: 30px;
      margin-left: 40px;
      margin-right: 40px;
    }
  }
}

.at-calendar-slider__main {
  .main__body {
    @include display-flex;

    width: 100%;

    &--animate {
      //  transition:: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
    }

    .body__slider {
      @include flex(0 0 100%);
    }
  }

  &--weapp,
  &--swan {
    .main__body {
      height: 480px;
    }
  }
}
